<template>
  <div class="hello">
    <a-table
      :ref="resizeableTableRef"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :components="components"
    >
      <template slot="action" slot-scope="text, record">
        <div>操作栏{{ text }}</div>
      </template>
    </a-table>
  </div>
</template>

<script>
// 参考链接： https://juejin.cn/post/7136080358688161828?searchId=2024051413062559C50576401196612D3C
import ResizeHeader, { customHeaderCell, ResizeColumnProvide } from './header'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mixins: [ResizeColumnProvide],
  data() {
    return {
      columns: [
        {
          title: '项目名称',
          dataIndex: 'projectName',
          key: 'projectName',
          ellipsis: true,
          width:200,
          resizable: true,
        },
        {
          title: '企业名称',
          dataIndex: 'company',
          key: 'company',
          ellipsis: true,
          width:200,
          resizable: true,
        },
        {
          title: '责任人',
          dataIndex: 'liablePersonName',
          key: 'liablePersonName',
          ellipsis: true,
          width:200,
          resizable: true,
        },
        {
          title: '操作',
          resizable: true,
          scopedSlots: { customRender: 'action' },
        }
      ],
      dataSource: [
        {
          id: 1,
          projectName: '项目1',
          company: '企业1',
          liablePersonName: '责任人1',
        },
        {
          id: 2,
          projectName: '项目2',
          company: '企业2',
          liablePersonName: '责任人2',
        },
        {
          id: 3,
          projectName: '项目3',
          company: '企业3',
          liablePersonName: '责任人3',
        },
      ]
    };
  },
  created() {
    this.columns = this.columns.map((col, colIndex) => Object.assign(col, {size: this.columns.length, colIndex, customHeaderCell }))
  },
  computed: {
    components() {
      return {
        header: {
          cell: ResizeHeader(this)
        }
      }
    }
  },
  methods: {
    
  }
}
</script>